<template>
  <div class="app-container documentation-container">

<div style="line-height: 30px">
  
  <span style="width: 100%;display: block;text-align: center;">馨艺平台艺术家合作协议</span> 
   
   <p style="text-indent:32px">
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">本协议适用于同源数智（北京）有限公司所属的馨艺平台（以下简称</span>“馨艺”、“平台”、或“甲方”）为艺术创作者（以下简称“创作者”或“乙方”）提供的艺术平台服务，馨艺平台包括馨艺微信公众号、馨艺微信小程序、馨艺H5系统、馨艺安卓手机APP、馨艺苹果手机APP、馨艺与各品牌合作页面、馨艺线下门店、馨艺艺术家管理中心。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">1. 释义</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">【艺术创作者】：艺术作品的创作者或团队。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">【艺术作品】：</span><span style=";font-family:Arial;color:rgb(51,51,51);font-size:16px"><span style="font-family:等线">油画、绘画、雕塑、雕刻</span></span><span style=";font-family:等线;color:rgb(51,51,51);font-size:16px">、摄影、数码绘画、空间设计、视频等可通过图片、视频、实物进行呈现的具有独特内容属性的信息产物。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">【艺术作品版权】本协议中所指版权即著作权，包括销售、租赁作品内容及作品原件在内的</span><span style=";font-family:等线;font-size:16px">财产性权利以及署名权、发表权、保护作品完整权等</span><span style=";font-family:等线;font-size:16px">。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">2.</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">艺术作品的展示</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">2.1作品上传要求</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">&nbsp;&nbsp;</span><span style=";font-family:等线;font-size:16px">艺术创作者签署本协议后，可通过平台上传创作的艺术作品并自动向公众展示。上传艺术品需符合国家法律法规。对任何违反国家法律法规的作品，馨艺有权进行删除。艺术创作者有权对展示的作品进行下架。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">2.2作品上传形式</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">&nbsp;&nbsp;&nbsp;</span><span style=";font-family:等线;font-size:16px"><span style="font-family:等线">艺术作品需通过馨艺指定途径上传电子版本，且分辨率不低于</span>100DPI。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">3.</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">版权所有权</span></strong>
</p>
<p>
    <span style="font-family: 等线;font-size: 16px">3.1</span><span style="font-family: 等线;font-size: 16px">&nbsp;</span><span style="font-family: 等线;font-size: 16px">版权独立</span>
</p>
<p style="text-indent:32px">
    <span style="font-family: 等线;font-size: 16px">创作者需确保通过平台展示作品为其独立创作的作品，且不存在任何权属纠纷。如因创作者提供虚假信息、伪作或产权不清作品而造成的任何损失及影响，创作者需承担所有损失。</span>
</p>
<p>
    <span style="font-family: 等线;font-size: 16px">3.2</span><span style="font-family: 等线;font-size: 16px">&nbsp;</span><span style="font-family: 等线;font-size: 16px">创作者版权</span>
</p>
<p style="text-indent:32px">
    <strong><span style="font-family: 等线;font-size: 16px">在馨艺平台的运行中，创作者始终拥有作品的版权。</span></strong><span style="font-family: 等线;font-size: 16px">无论创作者在馨艺平台的所有展示、销售、衍生应用，创作者的版权均不会因此转移。</span>
</p>
<p>
    <span style="font-family: 等线;font-size: 16px">3.3</span><span style="font-family: 等线;font-size: 16px">&nbsp;</span><span style="font-family: 等线;font-size: 16px">特殊情形下的版权转移</span>
</p>
<p style="text-indent:32px">
    <span style=";font-family:等线;font-size:16px">当创作者将版权进行销售，或委托馨艺平台进行销售时，作品的全部版权或部分版权随之转移。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">4. 版权保护代理</span></strong>
</p>
<p style="text-indent:32px">
    <span style=";font-family:等线;font-size:16px">艺术创作者在馨艺平台上传的作品将受到馨艺的版权保护。创作者授权馨艺为创作者进行义务版权保护。此服务主要用于防范互联网商业化侵权，所有追讨获得的侵权收入将归艺术创作者所有。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">5.</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">艺术作品的各类型销售</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">5.1</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">授权</span>
</p>
<p style="text-indent:32px">
    <span style=";font-family:等线;font-size:16px">艺术创作者将其上传的作品向馨艺平台进行授权，允许馨艺平台有偿使用艺术作品进行正版衍生品销售、原作品原件、原作品版权的代理销售。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">5.2</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">艺术家收益</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">艺术衍生品收益：销售出的正版衍生品后，根据双方协商的艺术作品使用价格进行累计收益。当无额外约定，每件衍生品的收益为</span>8元。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">艺术作品原作：销售出艺术作品原作后，创作者获得</span>90%定价金额。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">艺术品版权销售：销售艺术品版权后，创作者获得版权市场实际定价的全部收入。</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">6.</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">收益入账方式</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">（</span>1）银行卡结账，艺术创作者提供银行账号，结账时间每周四，结账后48小时内到账。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">（</span>2）微信账号结账，艺术创作者提供本人实名认证的微信号。结账时间为每日22点到23点，结账后实时到账。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:14px">&nbsp;&nbsp;</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">7.</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">创作者隐私保护</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">7.1</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">创作者信息</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">创作者在注册馨艺平台时，需向馨艺平台提供真实姓名、真实个人电话号码等联系信息，当作者为团体时，需提供代表人姓名及联系信息。</span><strong><span style="font-family: 等线;font-size: 16px">创作者提供的真实姓名及其它联系信息不用于公开展示</span></strong><span style=";font-family:等线;font-size:16px">，在得到创作者授权前，真实姓名及其它联系信息也不会出现在任何馨艺的对第三方信息披露中</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">7.2</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">平台展示信息</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">创作者向平台提供用于对外展示的艺术个人信息，包括展示姓名、展示头像、展示简介、作品介绍等。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">7.3</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">其它用户隐私信息的保护</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">馨艺平台遵循互联网应用标准的隐私保护办法。详见馨艺</span>“我的”页面，“隐私政策”《馨艺平台用户隐私政策》</span>
</p>
<p>
    <strong><span style="font-family: 等线;font-size: 16px">8</span></strong><strong><span style="font-family: 等线;font-size: 16px">&nbsp;</span></strong><strong><span style="font-family: 等线;font-size: 16px">创作者上传视频的版权</span></strong>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">艺术创作者拥有上传视频的版权并自动授权馨艺平台免费进行宣传和播放。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">9.</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">协议的生效与解除</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">本协议在</span>“馨艺艺术家管理中心”电子签约后生效，并可下载打印。艺术创作者联系馨艺平台申请注销账号后，协议自动解除。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">10.</span><span style=";font-family:等线;font-size:16px">&nbsp;</span><span style=";font-family:等线;font-size:16px">争议解决</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">对本协议有任何争议的，双方协商解决。如无法协商解决的，任何一方均可向北京仲裁委员会申请仲裁。</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">甲方：同源数智（北京）科技有限公司</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">日期：</span> </span>
    <span id='dt'>{{dt}}</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">&nbsp;</span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px"><span style="font-family:等线">乙方：</span> <span style="font-family:等线">艺术家签名</span></span>
</p>
<p>
    <span style=";font-family:等线;font-size:16px">日期：</span>
     <span id='dt2'>{{dt}}</span>
</p>
<!-- <p>
    <br/>
</p>
     -->
   
    
     
    </div>
  <div style="text-align: center;">
    <!-- <input onclick="updateagreement(1)" type="button" value="同意以上委托授权书"> -->
      <div v-if="!sign" class="upload-content">
           <div class="upload-content-title">点击下图进行手写签名</div>
             
               <div  @click="showPopup('digitaSign')" style="width: 100%;">
                <img style='height:100%' @load="tob" :src="uploadImage5" alt="" class="sign-img">
               </div>
 <el-button  id='sub'      type="primary"  @click.native.prevent="tijiao">提交</el-button>


        </div>


   <div  v-if="sign"  class="upload-content">
           <div class="upload-content-title"></div>
             
               <div   style="width: 100%;">
                <img   style='width:100%'   id='sub2' :src="uploadImage5" alt="" class="sign-img">
                已签约
               </div>
  

        </div>

    </div>


    <!-- <a
      class="document-btn"
      target="_blank"
      href="https://panjiachen.github.io/vue-element-admin-site/"
    >Documentation</a>
    <a
      class="document-btn"
      target="_blank"
      href="https://github.com/PanJiaChen/vue-element-admin/"
    >Github Repository</a>
    <a
      class="document-btn"
      target="_blank"
      href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
    >国内文档</a>
    <dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" /> -->
   <van-popup v-model="show2"  position="bottom" round class="popstyle">

             <digitaSign  @getimgsrc="getimgsrc" v-if="popcontent=='digitaSign'"></digitaSign>

        </van-popup>
  <van-popup :overlay="false" :close-on-click-overlay="false"  v-model="show"> 

        <van-circle
         color="#07c160"
 
  size="120px"
  layer-color="#ebedf0"
  v-model="currentRate"
  :rate="100"
  :speed="0"
  :text="text"
/>

</van-popup>
  </div>
  
</template>

<script>
import DropdownMenu from '@/components/Share/DropdownMenu'
import { mapGetters } from 'vuex'
import {Circle, Popup} from 'vant'
import Vue from 'vue'
 
import digitaSign from '@/components/page/case/digitaSign';
 Vue.use(Circle);
Vue.use(Popup)


export default {
  name: 'Documentation',
  components: { DropdownMenu },
    computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'cardname',
      'introduction'
    ])
  },
  data() {
    return {
      dt:'',
      havesign:false,
      popcontent:null,
      sign:false,
      show2:false,
      show:false,
       currentRate:0,
            rate:100,
            rate2:2,
            text:'',
            sess:false,
        uploadImage5: require('@/assets/images/case/signname.png'),
      articleList: [
        { title: '基础篇', href: 'https://juejin.im/post/59097cd7a22b9d0065fb61d2' },
        { title: '登录权限篇', href: 'https://juejin.im/post/591aa14f570c35006961acac' },
        { title: '实战篇', href: 'https://juejin.im/post/593121aa0ce4630057f70d35' },
        { title: 'vue-admin-template 篇', href: 'https://juejin.im/post/595b4d776fb9a06bbe7dba56' },
        { title: 'v4.0 篇', href: 'https://juejin.im/post/5c92ff94f265da6128275a85' },
        { title: '自行封装 component', href: 'https://segmentfault.com/a/1190000009090836' },
        { title: '优雅的使用 icon', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（上）', href: 'https://juejin.im/post/59bb864b5188257e7a427c09' },
        { title: 'webpack4（下）', href: 'https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc' }
      ]
    }
  },
  components:{
digitaSign

  },
  mounted(){
      if(sessionStorage.getItem('signpic')&&sessionStorage.getItem('signpic')!='null')
      {
        this.uploadImage5=sessionStorage.getItem('signpic')
        this.sign=true;
        this.sess=true;
      }
      this.dt=this.getNowFormatDate();

  },
  methods:{
  getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
     showPopup(data) {
            this.popcontent=data;
            // console.log(this.popcontent)
            this.show2 = true;
    },
getimgsrc(data){
      
      this.havesign=true;
       this.uploadImage5=data;
    
      //  console.log("我的图片的地址："+this.imgsrc);
       this.show2 = false;
     
        
     },
     tob(){
      //  if(!this.sess)
      //  {
        document.getElementById('sub').scrollIntoView(); 
document.scrollingElement.scrollTop=document.scrollingElement.scrollHeight+50;
console.log('right')
      //  }
     },
     tijiao()
     {
        if(this.havesign)
            this.uploadqianming(this.uploadImage5);
            else
            this.$toast('您还未签名')
     },
       uploadqianming(base64str){
      
        this.uploadtag=9;
        this.UpladFile(null,base64str);
    },
     UpladFile(fileObj,base64str) {
            // var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
              var form = new FormData(); // FormData 对象
            var isbase64=0;
            // console.log('base64str:'+base64str)
            //  console.log('fileobj:'+fileObj)
            if(base64str)
                  isbase64=1;
            var url =  "/dev-api/mapi/customer/uploadsign" // 接收上传文件的后台地址
            if(fileObj)
            {
          
            form.append("file", fileObj); // 文件对象
            }
            else{
              var dataurl=base64str;
     var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
 
form.append("file", obj,"xysign.png");
            }


            this.xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            this.xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            this.xhr.onload = this.uploadComplete; //请求完成
            this.xhr.onerror =  this.uploadFailed; //请求失败
         var _this=this;
            this.xhr.upload.onprogress = this.progressFunction;//【上传进度调用方法实现】
            this.xhr.upload.onloadstart = function(){//上传开始执行方法
              // var  ot = new Date().getTime();   //设置上传开始时间
              //  var  oloaded = 0;//设置上传开始时，以上传的文件大小为0
              _this.show=true;
              // _this.$loadingshow();
              _this.rate=100;
              _this.currentRate=0;
              _this.text='';
               
               
            };

            this.xhr.send(form); //开始上传，发送form数据

        },
   //上传成功响应
          uploadComplete(evt) {
            //服务断接收完文件返回的结果
               this.show=false;
               this.$loadingclose();
            var data = JSON.parse(evt.target.responseText);
            // console.log('服务器响应')
            console.log(data)
            if(data.success) {
              console.log('上传成功')
                this.$toast("签约成功！");
                this.sign=true;
                sessionStorage.setItem('signpic',data.result)
                 this.$router.push('/files/index')
                //  this.$router.push('/profile/edit')
               
                // this.uploadImage5=data.result;
                // this.uploadsuccess(data.result);
            }else{
                this.$toast(data.message);
            }

        },
        //上传失败
          uploadFailed(evt) {
                 this.show=false;
                  this.$loadingclose();
            this.$toast("上传失败！");
        },
        //取消上传
          cancleUploadFile(){
                 this.show=false;
                  this.$loadingclose();
            this.xhr.abort();
        },

  //上传进度实现方法，上传过程中会频繁调用该方法
          progressFunction(evt) {
            // var progressBar = document.getElementById("progressBar");
            // var percentageDiv = document.getElementById("percentage");
            // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
            if (evt.lengthComputable) {//
                // progressBar.max = evt.total;
                 // progressBar.value = evt.loaded;
                // this.rate=evt.total;
               
                this.currentRate = Math.round(evt.loaded / evt.total * 100);
               
                this.text = Math.round(evt.loaded / evt.total * 100) + "%";
                console.log(this.currentRate)
                  if(evt.loaded==evt.total)
                {
                   this.$loadingshow();
                }
            }
            else
            {
            
            }
             
        },

  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 45%;
    }
</style>
